<template>
  <div class="menu-box">
    <!-- <amenu>
      <amenu-item>123</amenu-item>
      <amenu-item>456</amenu-item>
      <amenu-item>789</amenu-item>
      <asub-menu>
        <div slot="title">999</div>
        <amenu-item>999-1</amenu-item>
        <amenu-item>999-2</amenu-item>
        <amenu-item>999-3</amenu-item>
      </asub-menu>
    </amenu>   -->
    <a-menu>
      <template v-for="(item, index) in list">
        <a-menu-item v-if="!item.children"  :key="`menu_item_${index}`">{{ item.title}}</a-menu-item>
        <re-submenu  v-else :key="`menu_item_${index}`" :parent="item" :index="index"></re-submenu>
      </template>
    </a-menu>
  </div> 
</template>
<script>
import menuComponents from '_c/menu'
import ReSubmenu from './re-submenu.vue'
export default {
  name: 'menuPage',
  components: {
    ...menuComponents,
    ReSubmenu
  },
  data(){
    return {
      list: [
        {
          title: '1111'
        },
        {
          title: '2222'
        },
        {
          title: '333',
          children:[
            {title: '333-1'},
            {
              title: '333-2',
              children:[
                {title: '333-2-1'},
                {title: '333-2-2'}
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>
<style>
  .menu-box{
    width:300px;
    height:400px;
  }
</style>


